<title>新增商圈</title>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">新增商圈</div>
        <div class="layui-card-body">
            <form class="layui-form adminformstyle" action="" id="addsqform">
                <div class="layui-form-item">
                    <label class="layui-form-label">商圈名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入商圈名称" class="layui-input">
                    </div>
                </div>            
                <div id="l-map"></div>
                <div id="r-result">
                    <div class="layui-form-item">
                        <label class="layui-form-label">地理位置</label>
                        <div class="layui-input-block">
                            <input  id="suggestId" type="text" autocomplete="off" placeholder="地理位置关键字" class="layui-input">
                        </div>
                    </div> 
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">国家</label>
                    <div class="layui-input-block">
                        <input type="text" name="country" autocomplete="off" disabled class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">省份</label>
                    <div class="layui-input-block">
                        <input type="text" name="prov" autocomplete="off" disabled class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">城市</label>
                    <div class="layui-input-block">
                        <input type="text" name="city" autocomplete="off" disabled class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">县区</label>
                    <div class="layui-input-block">
                        <input  type="text" name="area" autocomplete="off" disabled class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">镇</label>
                    <div class="layui-input-block">
                        <input type="text" name="town" autocomplete="off" disabled class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述信息</label>
                    <div class="layui-input-block">
                        <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <input type="hidden" name="lon">
                <input type="hidden" name="lat">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    </div>
</div>
<style>
    #l-map{height:300px;width:600px;margin-left:40px;margin-bottom: 15px;}
    .adminformstyle{max-width:600px;}
    .tangram-suggestion-main{z-index: 998;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=E17196ee6b0851315b7c9503f40060c9&services=&t=20180323171755"></script>
<script type="text/javascript">
layui.use(['admin', 'form'], function() {
        var $ = layui.$,
            admin   = layui.admin,
            element = layui.element,
            router  = layui.router(),        
            setter  = layui.setter,
            request = setter.request,        
            form    = layui.form;

    layer.load(2);
    var timer = setTimeout(function() {
        if("undefined" != typeof BMap){
            layer.closeAll();
            init();
            clearTimeout(timer);
        }        
    }, 100);
        
    function G(id) {
        return document.getElementById(id);
    }

    function init(){
        var map = new BMap.Map("l-map");
        map.centerAndZoom("北京", 12);                   // 初始化地图,设置城市和地图级别。
        map.enableScrollWheelZoom(true);
        var geoc = new BMap.Geocoder();  

        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {"input" : "suggestId"
            ,"location" : map
        });

        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }    
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
            
            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }    
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
            
            setPlace();
        });

        function setPlace(){
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun(){
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));    //添加标注
                                
                //设置经度纬度
                $("#addsqform input[name='lon']").val(pp.lng);
                $("#addsqform input[name='lat']").val(pp.lat);

                geoc.getLocation(pp, function(rs){
                    var addComp = rs.addressComponents;
                    //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                    $("#addsqform input[name='country']").val('中国');
                    $("#addsqform input[name='prov']").val(addComp.province);
                    $("#addsqform input[name='city']").val(addComp.city);
                    $("#addsqform input[name='area']").val(addComp.district);
                    $("#addsqform input[name='town']").val(addComp.street);
                }); 
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
    }

    //表单提交
    form.on('submit(formDemo)', function(data){
        var post = data.field;

        admin.req({
            type: 'POST',
            url: setter.host + 'shop/business-circle',
            data: post,
            done : function(res){
                layer.msg('提交成功', {offset: '15px', icon: 1, time: 1000}, function(){
                    layer.close(current);
                    layui.index.render();
                });
            }
        });
    
        return false;
    });

});
</script>
